<template>
  <div class="cthree">
    <h2>第三个组件</h2>
    <button @click="getNews">获取新闻</button><button>排序</button><button>过滤</button>
    <ul>
      <li v-for="v in news">
        标题：{{v.title}}——浏览量：{{v.views}}——时间：{{v.dateAdd}}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default {
  name: "CThree",
  data(){
    return {

    }
  },
  computed:{
    ...mapState([
      'news'
    ])
  },
  methods:{

    getNews(){
      this.$store.dispatch('resultNew')
    }
  },
  created() {
    this.$store.dispatch('resultNew');
  }

}
</script>

<style scoped>
  .cthree{
    width: 100%;
    background-color: #8bda79;
  }
</style>